<template>
  <div>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
    <el-form ref="form" label-width="80px">
      <el-form-item label="备注">
        <el-checkbox-group size="small" v-model="markArr">
          <el-checkbox :label="item" border v-for="item in marks" :key="item">{{
            item
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="请输入">
        <el-input v-model="mark" placeholder="请输入其它备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'detailMark',
  props: ['marks', 'dialogVisible'],
  data () {
    return {
      markArr: [],
      mark: ''

    }
  },
  methods: {

    handleClose () {
      this.markArr = []
      this.mark = ''
      this.$emit('update:dialogVisible', false)
    },
    onSubmit () {
      if (this.markArr.length == 0 && !this.mark) {
        this.$message({
          message: '请至少选择一项',
          type: 'warning'
        })
        return
      }
      let mark = ''
      if (this.markArr.length) {
        this.markArr.forEach((item, index) => {
          mark += item
          if (index != this.markArr.length - 1) {
            mark += ','
          }
        })
      }
      if (this.mark) {
        mark += this.mark
      }
      this.$emit('updateMark', mark)
    }
  }
}
</script>

<style>
</style>
